<script setup lang="ts">
import {reactive, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router"
import {addUser, countUserById} from "../network/api.ts";

let user = reactive({
  userId:'',
  password:'',
  userName:'',
  userSex:1
})
let confirmPassword = ref();
const router = useRouter()
// http://localhost:8080/


function register(){
  if (user.userId == '') {
    alert('手机号码不能为空！');
    console.log('手机号码不能为空！');
    return;
  }
  if (user.password == '') {
    alert('密码不能为空！');
    console.log('密码不能为空！');
    return;
  }
  if (user.password != confirmPassword.value) {
    alert('两次输入的密码不一致！');
    console.log('两次输入的密码不一致！');
    return;
  }
  if (user.userName == '') {
    alert('用户名不能为空！');
    console.log('用户名不能为空！');
    return;
  }

  countUserById(user.userId).then(res => { //get方法,目前这么写, 用get{path:""}这种解析url会有问题
    console.log("当前用户的个数："+res.data)
    if(res.data==1){
      user.userId = ''
      alert('此手机号码已存在！')
      console.log("此手机号码已存在")
    }else{
      console.log("可以进行注册")
      let data = reactive({
        id:user.userId,
        pw:user.password,
        name:user.userName,
        sex:user.userSex
      })
      addUser(data).then(res => {
        if(res.data==null){// 会返回一个User对象,  ==null表明, 注册失败
          alert('注册失败！');
          console.log('注册失败！');
        }else{
          alert('注册成功！');
          console.log('注册成功！');
          router.back()
        }
      })

    }
  }).catch(error =>{
    console.error(error)
  })
}

</script>

<template>
  <div class="wrapper w-full h-full">

    <!-- header部分 -->
    <header class="w-full h-12vw bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>用户注册</p>
    </header>

    <!-- 表单部分 -->
    <ul class="form-box w-full mt-12vw">
      <li class="box-border pt-4vw pb-3vw pl-3vw pr-3vw flex">
        <div class="title w-18vw flex text-3vw font-700 text-#666">
          手机号码：
        </div>
        <div class="content flex-1">
          <input class="border-none outline-none w-full h-4vw text-3vw"
                 type="text" @blur="checkUserId"
                 v-model="user.userId"
                 placeholder="手机号码">
        </div>
      </li>
      <li class="box-border pt-4vw pb-3vw pl-3vw pr-3vw flex">
        <div class="title w-18vw flex text-3vw font-700 text-#666">
          密码：
        </div>
        <div class="content flex-1">
          <input class="border-none outline-none w-full h-4vw text-3vw"
                 type="password"
                 v-model="user.password"
                 placeholder="密码">
        </div>
      </li>
      <li class="box-border pt-4vw pb-3vw pl-3vw pr-3vw flex">
        <div class="title w-18vw flex text-3vw font-700 text-#666">
          确认密码：
        </div>
        <div class="content flex-1">
          <input class="border-none outline-none w-full h-4vw text-3vw"
                 type="password"
                 v-model="confirmPassword"
                 placeholder="确认密码">
        </div>
      </li>
      <li class="box-border pt-4vw pb-3vw pl-3vw pr-3vw flex">
        <div class="title w-18vw flex text-3vw font-700 text-#666">
          用户名称：
        </div>
        <div class="content flex-1">
          <input class="border-none outline-none w-full h-4vw text-3vw"
                 v-model="user.userName"
                 type="text" placeholder="用户名称">
        </div>
      </li>
      <li class="box-border pt-4vw pb-3vw pl-3vw pr-3vw flex">
        <div class="title w-18vw flex text-3vw font-700 text-#666">
          性别：
        </div>
        <div class="content flex-1" style="font-size: 3vw;">
          <input class="border-none outline-none w-full h-4vw text-3vw"
                 type="radio"
                 v-model="user.userSex"
                 value="1" style="width:6vw;height: 3.2vw;">男
          <input class="border-none outline-none w-full h-4vw text-3vw"
                 type="radio"
                 v-model="user.userSex"
                 value="0" style="width:6vw;height: 3.2vw;">女
        </div>
      </li>
    </ul>

    <div class="button-login w-full h-10vw text-3.8vw font-700 text-#fff bg#38ca73 rounded-4px border-none outline-none">
      <button class="hover:bg-#38ca73 hover:text-white w-full h-10vw text-3.8vw font-700 text-#666 bg-#eee rounded-4px border-none outline-none border-solid border-1 border-#ddd"
              @click="register">注册</button>
    </div>

<!--    &lt;!&ndash; 底部菜单部分 &ndash;&gt;-->
<!--    <Footer></Footer>-->
  </div>
</template>

<style scoped>

</style>